<template>
    <div class="bread-main">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item v-for="(item, index) in breadList" :key="item.path"
                :to="shouldLink(item, index) ? { path: item.path } : null">

                {{ item.meta.title }}
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
import { ArrowRight } from '@element-plus/icons-vue'
export default {

    name: 'breadCurmb',
    data() {
        return {

        }
    },
    computed: {
        breadList() {
            return this.$route.matched;
        },
        ArrowRight: () => ArrowRight
    },
    methods: {
        shouldLink(item, index) {
            // 最后一项不添加链接
            return (

                index < this.breadList.length - 1 &&
                !!item.path &&
                item.meta?.noPath === false
            )

        }
    }
}
</script>

<style lang="scss" scoped>
.bread-main {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
}
</style>